<template>
  <div class="login-ing" v-show='loginFlag'>
      <div class="login-ball">
      </div>
      <div class="login-ball-color">
          logining
      </div>
  </div>
</template>

<script>
  export default {
      props: ['loginFlag'],
      created() {
          console.log(this.loginFlag)
      }
  }
</script>
<style lang='scss'  scoped>
.login-ing{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    .login-ball {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 200px;
        height: 200px;
         background: -webkit-linear-gradient(rgb(202, 235, 216), rgb(138, 43, 226));
        border-radius: 50%;
        animation:mymove 2s infinite;
    }
    .login-ball-color{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: white;
        width: 200px;
        height: 185px;
        border-radius: 50%;
        text-align: center;
        line-height: 185px;
    }
}
@keyframes mymove
{
0% {
    transform: rotate(0deg);
    // opacity: 1;
    // background: blue
    }
80% {
    transform: rotate(180deg);
    // opacity: 0.25;
    // background: white
    }
100% {
    transform: rotate(360deg);
    }
}
@-webkit-keyframes mymove
{
0% {
    transform: rotate(0deg);
    // opacity: 1;
    // background: blue
    }
80% {
    transform: rotate(180deg);
    // opacity: 0.25;
    // background: white
    }
100% {
    transform: rotate(360deg);
    }
}
</style>
